<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>AbulÉdu Data Search</title>
        <link rel="stylesheet" type="text/css" href="css/basic.css"/>
        <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
        <script type="text/javascript">
            var category = "image";
            var thumbnails = true;
            var minHeight = 150;
            var minWidth = 150;
            
            var currentIndex = 0;
            var currentTerm = "";
            var limit = 10;
            var filtersDisplayed = false; //display or hide filters
 
            function addPaginationLinks(totalResults) {
                var curPage = currentIndex; // check what page the app is on
                var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
                for (var i = 0; i < 8; i++) {
                    if (i * limit < totalResults) {
                   
                        var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
                        if (curPage == i) {
                            link.addClass('active');
                        }
                    }
                }

                $("#disc_nav_cont #resultFooter").remove();
                pagesDiv.insertBefore($('#disclaimer'));
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragstart", imageDragging, false);
                })
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragenter", imageDragenter, false);
                })
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragleave", imageDragleave, false);
                })
                
                $(".imgContainer").each(function(){
                    this.addEventListener("dragover", imageDragover, false);
                })
            }

            function searchFail(jqXHR, textStatus, errorThrown) {
                alert('Impossible to connect to AbulEdu : ' + textStatus + ' ' + errorThrown);
            }

            function searchComplete(json) {
                // Grab our content div, clear it.
                var totalResults = json.totalResults;
                var contentDiv = $('#searchResult').empty();
                // Loop through our results, printing them to the page.
                var results = json.rows;
                for (var i = 0; i < results.length; i++) {
                    // For each result write it's title and image to the screen
                    var result = results[i];
                    var imgContainer = $("<div class='imgContainer' draggable='true'>");
                    //var title = document.createElement('div');
                    var iUrl = $("<input type='hidden'/>");
                    var iContent = $("<input type='hidden'/>");
                    var iHeight = $("<input type='hidden'/>");
                    var iWidth = $("<input type='hidden'/>");
                    var iTitle = $("<input type='hidden'/>");
                    var iThumbnailUrl = $("<input type='hidden'/>");
                    // We use titleNoFormatting so that no HTML tags are left in the 
                    // title
                    //title.innerHTML = result.title;
                    var newImg = document.createElement('img');

                    // There is also a result.file property which has the escaped version
                    if (thumbnails) {
                        newImg.src = result.file;
                        /*if(result.height >= result.width)
                            newImg.height = minHeight;
                        else{
                            newImg.width = minWidth;
                            //newImg.style.margin = (120 - result.height)/2 + "px 0";
                        }*/
                    } else {
                        newImg.src = "./images/thumbnail_icon.png";
                    }
                    var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth;
                    var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
                    imgContainer.width(imgWidth).height(imgHeight);
                    imgContainer.append($(newImg));
                    iUrl.attr("value", result.file);
                    iContent.attr("value", result.title);
                    iHeight.attr("value", result.height);
                    iWidth.attr("value", result.width);
                    iTitle.attr("value",result.title);
                    iThumbnailUrl.attr("value",newImg.src);
                    //imgContainer.append($(title));  
                    imgContainer.append(iUrl);
                    imgContainer.append(iContent);
                    imgContainer.append(iHeight);
                    imgContainer.append(iWidth);
                    imgContainer.append(iTitle);
                    imgContainer.append(iThumbnailUrl);

                    // Put our title + image in the content
                    imgContainer.appendTo(contentDiv);

                }
                // Now add links to additional pages of search results.
                addPaginationLinks(totalResults);
            }

            function imageDragging(e){
                e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
                // alert($(this).find("input:hidden").eq(0).val());
            }
            
            function imageDragleave(e){
                return false;
            }
            
            function imageDragover(e){
                return false;
            }
            
            function imageDragenter(e){
                return false;
            }
            
            $(document).ready(function(){

                //variables
                var mode = false; //search or view mode
                var hide = false; //hide or no main panel
    
                //basic containers and elements    
                
                var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body");    
                var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche d'images sur Data AbulÉdu<div>").appendTo(disc_nav_cont);
                var search = $("<div id='search' class='search'>").appendTo("body");
				    
                var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
                var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
    
                var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
                var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
    
                var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
                var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
                // var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput);
    
                //adding filters to the wgt
                var selectFilter = $("<select id='sizeFilter' class='filterSelect'>")
                .append($("<option value='0'>Any</option>"))
                .append($("<option value='1'>Small</option>"))
                .append($("<option value='2'>Medium</option>"))
                .append($("<option value='3'>Large</option>"))
                .append($("<option value='4'>Extra large</option>"));
                $("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter);
                
                //mouse click actions 
                /*
                toggleFilters.click(function(){
                    if(filtersDisplayed){
                        subSearchFilter.hide();
                        toggleFilters.css("background-image","url(images/down.png)");
                        filtersDisplayed = false;
                    } else {
                        subSearchFilter.show();
                        toggleFilters.css("background-image","url(images/up.png)");
                        filtersDisplayed = true;
                    }
                });
                 */

                /*togglePages.click(function(event){
                    if(mode){
                        hide = false;
                        $("#search, #disclaimer").slideDown('slow', function(){
                            toggleIcon.css("background-image","url(images/trgUp.png)");
                            togglePages.appendTo("#search").css("top","").css("bottom","-14px");                            
                        });
                        mode = false;
                    } else {
                        hide = true;
                        $("#search, #disclaimer").slideUp('slow', function(){
                            toggleIcon.css("background-image","url(images/trgDown.png)");
                            togglePages.appendTo("body").css("top","0");                            
                        });
                        mode = true;
                    }
                });*/
                
                searchButton.click(function(){
                    if(!hide){
                        runSearch(searchInput.val(), 0);
                        //togglePages.trigger("click");
                    }
                });
                
                searchInput.keydown(function(event){
                    if(!hide){
                        if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
                            runSearch(searchInput.val(), 0);
                            //togglePages.trigger("click");
                        }
                              
                    }
                });
                (
                $(".imgContainer").live("click",function(){
                    sankore.sendFileMetadata(createMetaData($(this)));
                }));
                
                /*$(window).resize(function(){
                    disclaimer.width($("body").width()-20);
                    search.width($("body").width()-20);
                    toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
                })*/
				
            });
            
            function gotoPage(i) { 
                runSearch(currentTerm, i);             
            } 

            // launching the search on AbulEdu
            function runSearch(term, index) {
                currentTerm = term;
                currentIndex = index;
                var start = index * limit;
                var url = "http://data.abuledu.org/search.php?terms=" + escape(term) + "&start=" + start + "&limit=" + limit;
                $.ajax({
                    url: url,
                    success: searchComplete,
                    error: searchFail,
                    dataType: "json"
                });
            }
 
            function createMetaData(parent){
                var meta = "";
                //alert($(this).find("input:hidden").eq(0).val());
                meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" + 
                    parent.find("input:hidden").eq(0).val() + 
                    "</value></data><data><key>Content</key><value>" + 
                    parent.find("input:hidden").eq(1).val() +
                    "</value></data><data><key>Height</key><value>" + 
                    parent.find("input:hidden").eq(2).val() +
                    "</value></data><data><key>Width</key><value>" +
                    parent.find("input:hidden").eq(3).val() +
                    "</value></data><data><key>Title</key><value>" +
                    parent.find("input:hidden").eq(4).val() +
                    "</value></data><data><key>thumbnailUrl</key><value>" +
                    parent.find("input:hidden").eq(5).val() +
                    "</value></data></metadata>";
                return meta;
            }
        </script>

    </head>
    <body style="font-family: Arial;border: 0 none;">
        <div id="searchResult"></div>
    </body>
</html>
